{{ define "omegadash_navbar" }}
<div class="flex items-center justify-center justify-between bg-gray-100 dark:bg-gray-800 p-4 text-white">
	<!-- Profile Section -->
	<div class="flex items-center space-x-3">
        
		<!-- Profile Image Placeholder -->
		<div class="w-12 h-12 bg-gray-400 rounded">
			<img src="/assets/static/img/ui/placeholder_user.png" alt="Profile Image" class="w-full h-full">
		</div>

		<!-- Username and Points -->
		<div>
			<div class="text-2xl text-gray-900 dark:text-white font-semibold text-sm">{{ .Username }}</div>
			<div class="text-xs text-black dark:text-gray-400">{{ .Points }} Points</div>
		</div>
	</div>

	<!-- Title and Time Section -->
	<div class="absolute inset-x-0 text-center">
		<div class="text-2xl font-bold text-gray-900 dark:text-white">Home</div>
		<div id="clock" class="text-gray-400"></div>
	</div>

	<!-- Close Button -->
	<!-- TODO: I need to figure this out better -->
	<div class="w-12 h-12 flex items-center justify-center bg-gray-600 rounded-full focus:bg-gray-400">
		<a href="#">
			<img src="/assets/static/img/ui/close.svg" alt="Close" class="w-8 h-8">
		</a>
	</div>
</div>
{{ end}}